<template>
  <el-card class="filter-card" :body-style="{ padding: '15px' }">
    <DynamicForm
      ref="filterFormRef"
      :model-value="filterForm"
      @update:model-value="handleUpdateFilterForm"
      :form-config="filterConfig"
      :gutter="16"
      label-width="80px"
      type="search"
      @search="handleSearch"
      @reset="handleReset"
    />
  </el-card>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from "vue";
import DynamicForm from "@/components/DynamicForm/index.vue";
import type { DynamicFormInstance } from "@/components/DynamicForm/types";
import type { FormItemConfig } from "@/components/DynamicForm/types";

const props = defineProps({
  filterForm: {
    type: Object,
    required: true,
  },
  filterConfig: {
    type: Array as () => FormItemConfig[],
    required: true,
  },
});

const emit = defineEmits<{
  (e: "search", values: any): void;
  (e: "reset"): void;
  (e: "update:filterForm", values: any): void;
}>();

const filterFormRef = ref<DynamicFormInstance>();

const handleUpdateFilterForm = (values: any) => {
  emit("update:filterForm", values);
};

const handleSearch = (values: any) => {
  emit("search", values);
};

const handleReset = () => {
  emit("reset");
};
</script>

<style scoped lang="scss">
.filter-card {
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}
</style>
